<template>
  <div class="item">
    <div class="img-box">
      <div>
        <img @click="goDetail(item._id)" class="img" :src="item.img" alt="">
      </div>
      <div class="cart" @click="addCart(item)"> <i class="iconfont add icon-add"></i> 添加至购物车</div>
    </div>
    <div class="info">
      <p class="name">{{item.name}}</p>
      <p class="detail">{{item.detail}}</p>
      <p class="price">{{item.price}}元</p>
    </div>
  </div>
</template>

<script>
export default {
  props:['item']
}
</script>

<style scoped>
  .item{
    margin-bottom: 20px;
    padding-bottom:12px;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
    transition: .12s;
  }
  .item:last-child:nth-child(4n - 1) {
    margin-right: calc(25% + 4% / 3);
  }
  .item:last-child:nth-child(4n - 2) {
    margin-right: calc(49% + 10% / 3);
  }
  .item:hover{
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
  }
  .item:hover .cart{
   opacity: 1;
  }
  .img-box{
    width: 231px;
    height: 146px;
    overflow: hidden;
    position: relative;
  }
  .cart{
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
    position: absolute;
    width: 100%;
    background-color: #6FFFE5;
    bottom: 0px;
    color: #143434;
    opacity: 0;
    transition: .2s;
    cursor: pointer;
  }
  .img{
    width: 100%;
    transition: transform .2s;
    cursor: pointer;
  }
  .img-box:hover .img{
    transform: scale(110%);
  }
  .info{
    width: 231px;
    padding: 4px 8px 0;
  }
  .info > p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .name{
    font-size: 16px;
    color: #000;
  }
  .detail{
    color: #8b8b8b;
    margin: 10px 0;
  }
  .price{
    margin-right: 7px;
    color: #ff0909;
  }
  .add{
    font-weight: 800;
  }
</style>